<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <meta content='' name='description'>
    <meta content='Nils Nordman' name='author'>
    <link href='/images/howl.png' rel='shortcut icon'>
    <title>Howl :: Editing</title>
    <link href="/stylesheets/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/syntax.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/howl.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="/javascripts/manual.js" type="text/javascript"></script>
    <link href='//fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  </head>
  <body class='doc doc_manual doc_manual_editing'>
    <div class='container'>
      <div class='masthead'>
        <ul class='nav nav-pills'>
          <li>
            <a href='/'>
              <span class='glyphicon glyphicon-home'></span>
              Home
            </a>
          </li>
          <li>
            <a href='/doc/'>
              <span class='glyphicon glyphicon-book'></span>
              Documentation
            </a>
          </li>
          <li>
            <a href='/blog/'>
              <span class='glyphicon glyphicon-bullhorn'></span>
              Blog
            </a>
          </li>
          <li>
            <a href='/contact.html'>
              <span class='glyphicon glyphicon-inbox'></span>
              Contact
            </a>
          </li>
        </ul>
      </div>
      <ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href='../'>Howl 0.4 Documentation</a></li><li>Manual</li><li>Editing</li></ol>
      <div class='howl-theme-selector' style='display:none'>&#x000A;  <div class='dropdown'>&#x000A;    <button class='btn btn-default btn-sm' data-toggle='dropdown' type='button'>&#x000A;      Select theme for pictures..&#x000A;      <b class='caret'></b>&#x000A;    </button>&#x000A;    <ul class='dropdown-menu' role='menu'>&#x000A;      <li role='presentation'>&#x000A;        <a class='set-howl-theme' data-key='monokai' href='#' role='menuitem'>&#x000A;          Monokai&#x000A;        </a>&#x000A;      </li>&#x000A;      <li role='presentation'>&#x000A;        <a class='set-howl-theme' data-key='solarized-light' href='#' role='menuitem'>&#x000A;          Solarized Light&#x000A;        </a>&#x000A;      </li>&#x000A;      <li role='presentation'>&#x000A;        <a class='set-howl-theme' data-key='steinom' href='#' role='menuitem'>&#x000A;          Steinom&#x000A;        </a>&#x000A;      </li>&#x000A;      <li role='presentation'>&#x000A;        <a class='set-howl-theme' data-key='tomorrow-night-blue' href='#' role='menuitem'>&#x000A;          Tomorrow Night Blue&#x000A;        </a>&#x000A;      </li>&#x000A;    </ul>&#x000A;  </div>&#x000A;</div>&#x000A;<h1 id="editing">Editing</h1>    <div class="toc">
      <div class="toc-title">
        <span>Editing</span>
      </div>
      <div class="toc-entries">
<div class="toc-group">
<a href="#overview" class="toc-group-header overview">Overview</a>
</div>
<div class="toc-group">
<a href="#auto-pairs" class="toc-group-header auto_pairs">Auto pairs</a>
</div>
<div class="toc-group">
<a href="#code-blocks" class="toc-group-header code_blocks">Code blocks</a>
</div>
<div class="toc-group">
<a href="#buffer-structure" class="toc-group-header buffer_structure">Buffer structure</a>
</div>
<div class="toc-group">
<a href="#buffer-search" class="toc-group-header buffer_search">Buffer search</a>
</div>
<div class="toc-group">
<a href="#whole-word-search" class="toc-group-header whole_word_search">Whole word search</a>
</div>
<div class="toc-group">
<a href="#buffer-grep" class="toc-group-header buffer_grep">Buffer grep</a>
</div>
<div class="toc-group">
<a href="#replacement" class="toc-group-header replacement">Replacement</a>
</div>
<div class="toc-group">
<a href="#comments" class="toc-group-header comments">Comments</a>
</div>
<div class="toc-group">
<a href="#clipboard-history" class="toc-group-header clipboard_history">Clipboard history</a>
</div>
<div class="toc-group">
<a href="#word-wrapping" class="toc-group-header word_wrapping">Word wrapping</a>
</div>
<div class="toc-group">
<a href="#version-control-diffs" class="toc-group-header version_control_diffs">Version control diffs</a>
</div>
<div class="toc-group">
<a href="#documentation-popup" class="toc-group-header documentation_popup">Documentation popup</a>
</div>
</div>
</div>
&#x000A;&#x000A;<h2 id="overview">Overview</h2>&#x000A;&#x000A;<p>This section attempts to highlight a few things that you might encounter while&#x000A;editing, or that might simplify your editing experience.</p>&#x000A;&#x000A;<h2 id="auto-pairs">Auto pairs</h2>&#x000A;&#x000A;<p>Auto pairs, where a matching end character is inserted automatically as you type&#x000A;the starting character, is supported out of the box in Howl. This can save you&#x000A;some typing as you don&rsquo;t have to type out the ending character for every&#x000A;combination of <code>[]</code>, <code>{}</code>, etc. If you select some text and type an auto pair&#x000A;character such as <code>[</code>, auto pairs will enclose the selection in matching start&#x000A;and end characters. Exactly what pairs are enabled for a buffer is specified&#x000A;by the buffer&rsquo;s mode.</p>&#x000A;&#x000A;<p>In case you find auto pairs annoying, the configuration variable&#x000A;<code>auto_pair</code> lets you specify whether you want this on or not.</p>&#x000A;&#x000A;<h2 id="code-blocks">Code blocks</h2>&#x000A;&#x000A;<p>Code blocks are code snippets that are automatically inserted as you type. They&#x000A;differ from completions in that they are inserted without any prompting, and can&#x000A;include more text than a single completion would. As an example, if you were to&#x000A;type the following Lua, and press enter:</p>&#x000A;<pre class="highlight lua"><span class="k">function</span> <span class="nf">foo</span><span class="p">()</span> <span class="c1">-- &lt;- cursor here</span>&#x000A;</pre>&#x000A;<p>Howl would automatically insert the matching <code>end</code> for you, like so:</p>&#x000A;<pre class="highlight lua"><span class="k">function</span> <span class="nf">foo</span><span class="p">()</span>&#x000A;  <span class="c1">-- &lt;- cursor here</span>&#x000A;<span class="k">end</span>&#x000A;</pre>&#x000A;<p>The configuration variable <code>auto_format</code> lets you specify whether you want this on&#x000A;or not.</p>&#x000A;&#x000A;<h2 id="buffer-structure">Buffer structure</h2>&#x000A;&#x000A;<p>When editing a larger buffer, it can be challenging to quickly jump to a&#x000A;specific part of it. The <code>buffer-structure</code> command (bound to <code>alt_s</code> by&#x000A;default) can provide you with an outline for the current buffer:</p>&#x000A;&#x000A;<p><img alt="Buffer structure" src="/images/screenshots/monokai/buffer-structure.png" /></p>&#x000A;&#x000A;<p>How well this works is depending on the language mode - should the mode not&#x000A;provide custom support for this a general, indentation-based, structure is&#x000A;provided.</p>&#x000A;&#x000A;<h2 id="buffer-search">Buffer search</h2>&#x000A;&#x000A;<p>The <code>buffer-search-forward</code> and <code>buffer-search-backward</code> commands (bound to&#x000A;<code>ctrl_f</code> and <code>ctrl_r</code> respectively) provide an easy way to find exact matches&#x000A;near the cursor. The visible matches are highlighted in real-time, as you type&#x000A;your search text.</p>&#x000A;&#x000A;<p><img alt="Buffer search" src="/images/screenshots/monokai/buffer-search-forward.png" /></p>&#x000A;&#x000A;<p>The match closest to the cursor is focused and you can use the <code>up</code> and <code>down</code>&#x000A;keys to jump between different matches. Hitting <code>enter</code> moves the cursor to the&#x000A;focused match.</p>&#x000A;&#x000A;<h2 id="whole-word-search">Whole word search</h2>&#x000A;&#x000A;<p>Looking only for whole word matches can be useful when there happen to be many&#x000A;sub-string matches that you want to ignore. The <code>buffer-search-word-forward</code> and&#x000A;<code>buffer-search-word-backward</code> commands (bound to <code>ctrl_period</code> and <code>ctrl_comma</code>)&#x000A;work similar to the buffer search commands above, but they only match whole&#x000A;words and they also automatically search for the current word at the cursor.</p>&#x000A;&#x000A;<p><img alt="Whole word search" src="/images/screenshots/monokai/whole-word-search.png" /></p>&#x000A;&#x000A;<p>Note that the match within &lsquo;text_len&rsquo; is not highlighted in the screenshot&#x000A;above.</p>&#x000A;&#x000A;<p>The <code>up</code> and <code>down</code> keys jump between the matches for these commands as well.</p>&#x000A;&#x000A;<h2 id="buffer-grep">Buffer grep</h2>&#x000A;&#x000A;<p>Buffer grep commands are an alternative to the regular <code>buffer-search-</code> commands&#x000A;for searching the current buffer. These commands search the entire buffer as you&#x000A;type and display all matching lines in real-time:</p>&#x000A;&#x000A;<p><img alt="Buffer grep" src="/images/screenshots/monokai/buffer-grep.png" /></p>&#x000A;&#x000A;<p>There are three buffer grep commands available for three types of searches:</p>&#x000A;&#x000A;<ol>&#x000A;<li><code>buffer-grep</code> (bound to <code>ctrl_g</code>) shows exact and boundary matches.</li>&#x000A;<li><code>buffer-grep-regex</code> shows regular expression matches.</li>&#x000A;<li><code>buffer-grep-exact</code> shows exact matches only.</li>&#x000A;</ol>&#x000A;&#x000A;<p>After invoking <code>buffer-grep</code>, you can press <code>ctrl_g</code> repeatedly to cycle through&#x000A;all the grep commands.</p>&#x000A;&#x000A;<h2 id="replacement">Replacement</h2>&#x000A;&#x000A;<p>The <code>buffer-replace</code> and <code>buffer-replace-regex</code> commands provide a way to&#x000A;replace multiple matches of some text or a regular expression in the current&#x000A;buffer.</p>&#x000A;&#x000A;<p>The simpler <code>buffer-replace</code> command is used for replacing exact matches of some&#x000A;text. After invoking <code>buffer-replace</code>, you type the text you want to match (also&#x000A;called the <em>target</em> text), followed by <code>/</code> (the forward slash is the default&#x000A;separator), followed by the replacement text. As an example, if you want to&#x000A;replace all instances of &lsquo;showing&rsquo; with &lsquo;visible&rsquo;, you would invoke&#x000A;<code>buffer-replace</code> and then type &lsquo;showing/visible&rsquo;.</p>&#x000A;&#x000A;<p><img alt="Buffer replace" src="/images/screenshots/monokai/buffer-replace.png" /></p>&#x000A;&#x000A;<p>As you type, the displayed preview buffer is updated to show the effect of your&#x000A;replacement. You can use the <code>up</code> and <code>down</code> arrow keys to jump between&#x000A;different matches in the preview buffer. You can press <code>alt_enter</code> to toggle&#x000A;whether or not the currently focussed match should be replaced with the target -&#x000A;this lets you selectively preserve some matches from being replaced.</p>&#x000A;&#x000A;<p>Once you are happy with the replacements as displayed in the preview buffer, you&#x000A;can press <code>enter</code> to commit the replacements - this updates the original buffer.</p>&#x000A;&#x000A;<p>If you want to use &lsquo;/&rsquo; as part of your target text, you need to use a different&#x000A;separator. To specify this, type <code>backspace</code> immediately after invoking&#x000A;<code>buffer-replace</code> - this deletes the automatically inserted leading &lsquo;/&rsquo;. Now type&#x000A;a separator of your choice (for example, &lsquo;#&rsquo;), followed by the target text, the&#x000A;chosen spearator, and then the replacement text.</p>&#x000A;&#x000A;<p>The <code>buffer-replace-regex</code> command works similarly to <code>buffer-replace</code> but the&#x000A;target text is specified as a regular expression and not as an exact match. In&#x000A;addition, the replacement text can contain back-references to specific parts of&#x000A;the target. A back-reference is specified as &lsquo;\&rsquo; followed by a number. For&#x000A;example, &lsquo;\1&rsquo; refers to the first group in the matched text.</p>&#x000A;&#x000A;<p>Selecting some text in the editor before invoking a replace command restricts&#x000A;the replacement to the selected text only.</p>&#x000A;&#x000A;<h2 id="comments">Comments</h2>&#x000A;&#x000A;<p>The <code>editor-toggle-comment</code> is bound to <code>ctrl_slash</code> by default, and let&rsquo;s you&#x000A;quickly comment and uncomment code.</p>&#x000A;&#x000A;<h2 id="clipboard-history">Clipboard history</h2>&#x000A;&#x000A;<p>Howl manages its own clipboard, and lets you paste cut or copied text other than&#x000A;the latest text in the clipboard. The <code>editor-paste..</code> command (bound to&#x000A;<code>ctrl_shift_v</code> by default) opens a list of previous clips and pastes any&#x000A;available clip that you choose:</p>&#x000A;&#x000A;<p><img alt="Clipboard paste" src="/images/screenshots/monokai/clipboard.png" /></p>&#x000A;&#x000A;<h2 id="word-wrapping">Word wrapping</h2>&#x000A;&#x000A;<p>Howl provides optional support for hard wrapping of text paragraphs. The&#x000A;<code>fill-paragraph</code> command, bound to <code>alt_q</code> by default, will reflow a paragraph&#x000A;so that each line is at most as long as the configuration variable&#x000A;<code>hard_wrap_column</code> specifies.</p>&#x000A;&#x000A;<p>You can also turn on automatic reflowing of paragraphs if you like, by&#x000A;customizing the <code>auto_reflow_text</code> configuration variable. This reflow the&#x000A;current paragraph as you type if needed. For example, the author keeps this in&#x000A;his <code>~/.howl/init.moon</code> to enable automatic reflowing for markdown documents:</p>&#x000A;<pre class="highlight moonscript"><span class="n">howl</span><span class="p">.</span><span class="n">mode</span><span class="p">.</span><span class="n">configure</span><span class="w"> </span><span class="s1">'markdown'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w">&#x000A;  </span><span class="ss">auto_reflow_text:</span><span class="w"> </span><span class="kc">true</span><span class="w">&#x000A;</span><span class="p">}</span><span class="w">&#x000A;</span></pre>&#x000A;<p>Unlike most other feature, this is not enabled by default, so you have to&#x000A;explicitly turn it on.</p>&#x000A;&#x000A;<h2 id="version-control-diffs">Version control diffs</h2>&#x000A;&#x000A;<p>The version control support in Howl is currently rather spartan, and will be&#x000A;expanded in future releases. However, if you&rsquo;re using Git you might find the&#x000A;<code>vc-diff</code> and <code>vc-diff-file</code> commands useful. The former displays a complete&#x000A;diff for your entire repository, while the latter displays a diff for the&#x000A;current file.</p>&#x000A;&#x000A;<h2 id="documentation-popup">Documentation popup</h2>&#x000A;&#x000A;<p><em>Support for this is dependent on the language mode, and is currently only&#x000A;available for Lua and Moonscript.</em></p>&#x000A;&#x000A;<p>The <code>show-doc-at-cursor</code> command, bound to <code>ctrl_q</code> by default, pops up&#x000A;documentation for the symbol at the cursor if available:</p>&#x000A;&#x000A;<p><img alt="Show doc" src="/images/screenshots/monokai/show-doc.png" /></p>&#x000A;&#x000A;<hr>&#x000A;&#x000A;<p><em>Next</em>: <a href="views.html">Using multiple views</a></p>
      <div class='footer text-muted'>
        <a href='/'>
          <img width="50" height="50" class="footer-logo" src="/images/howl.png" />
        </a>
        <div class='footer-follow'>
          <p>
            <a class='twitter-follow-button' data-lang='en' data-show-count='false' href='https://twitter.com/howleditor' rel='me'>
              Follow @howleditor
            </a>
          </p>
          <p>
            <a class='twitter-share-button' data-count='none' data-hashtags='howleditor' data-lang='en' data-text='The Howl Editor, a general purpose, light-weight customizable editor.' data-url='http://howl.io' href='https://twitter.com/share'>
              Tweet
            </a>
          </p>
        </div>
        <div class='footer-blurb'>
          <div>The Howl editor.</div>
          <div>
            Copyright 2012-2016
            <a class='alert-link' href='https://github.com/howl-editor/howl/contributors'>
              The Howl Developers.
            </a>
          </div>
        </div>
      </div>
    </div>
    <script>
      <!-- / GA -->
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-45283282-1', 'howl.io');
      ga('send', 'pageview');
      <!-- / Twitter -->
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
      js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>
  </body>
</html>

